<template>
    <global-dialog
        ref="layerDom"
        :layer="layer"
        @update="onUpdate"
        @confirm="onSubmit"
    >
        <el-form
            ref="ruleForm"
            :model="form"
            :rules="rules"
            label-width="6em"
        >
            <el-form-item label="名称：" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="数字：" prop="number">
                <el-input
                    v-model="form.number"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    placeholder="只能输入正整数"
                />
            </el-form-item>
            <el-form-item label="选择器：" prop="select">
                <el-select v-model="form.choose" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in selectData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="单选框：" prop="radio">
                <el-radio-group v-model="form.radio">
                    <el-radio
                        v-for="item in radioData"
                        :key="item.value"
                        :label="item.value"
                    >
                        {{ item.label }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </global-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance, FormItemRule } from 'element-plus'
import type { GlobalDialogLayer } from '~/types/components.types'
import type { GlobalDialogInstance } from '~/types/global.types'
import type { TableListType } from '~/types/table.types'

import Rules from '@lincy/async-validation'

import { ElMessage } from '~/config/element'
import { radioData, selectData } from '~/views/table/enum'

defineOptions({
    name: 'DialogTreeUserModify',
})

const emit = defineEmits(['getTableData', 'update'])

const layer = defineModel<GlobalDialogLayer<Nullable<TableListType>>>({ required: true })

const ruleForm = useTemplateRef<FormInstance>('ruleForm')
const layerDom = useTemplateRef<GlobalDialogInstance>('layerDom')

let form = $ref<TableListType>({
    id: undefined,
    name: undefined,
    number: undefined,
    choose: undefined,
    radio: undefined,
})
const rules = {
    name: Rules.string('姓名') as FormItemRule[],
    number: Rules.integer('数字') as FormItemRule[],
    choose: Rules.select('选择器') as FormItemRule[],
    radio: Rules.select('单选框') as FormItemRule[],
}

function onSubmit() {
    if (ruleForm.value) {
        ruleForm.value.validate((valid) => {
            if (valid) {
                if (layer.value.row) {
                    updateForm(form)
                }
                else {
                    addForm(form)
                }
            }
        })
    }
}
// 新增提交事件
async function addForm(params: TableListType) {
    layer.value.loadingBtn = true
    const { code } = await $api.post('/table/add', params)
    if (code === 200) {
        ElMessage({
            type: 'success',
            message: '新增成功',
        })
        emit('getTableData', true)
        onUpdate(false)
    }
    layer.value.loadingBtn = false
}
// 编辑提交事件
async function updateForm(params: TableListType) {
    layer.value.loadingBtn = true
    const { code } = await $api.post('/table/update', params)
    if (code === 200) {
        ElMessage({
            type: 'success',
            message: '编辑成功',
        })
        emit('getTableData', false)
        onUpdate(false)
    }
    layer.value.loadingBtn = false
}
function onUpdate(payload: boolean) {
    emit('update', payload)
}

function init() {
    // 用于判断新增还是编辑功能
    if (layer.value.row) {
        form = deepClone(layer.value.row)
    } // 数量量少的直接使用这个转
}
init()
</script>
